<template>
  <el-row align="middle">
    <el-col :span="16">
      <el-form ref="searchForm" :model="data.searchParams">
        <el-row :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="宿舍名称" prop="roomName">
              <el-input v-model="data.searchParams.roomName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宿舍楼名称" prop="groupId">
              <el-select
                filterable
                v-model="data.searchParams.groupId"
                placeholder="请选择宿舍楼名称"
                size="large"
                style="width: 240px"
              >
                <el-option
                  v-for="item in data.roomGroupList"
                  :key="item.id"
                  :label="item.groupName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="8">
      <el-button type="primary" @click="getData">搜索</el-button>
      <el-button @click="searchRest">重置</el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-button
      type="primary"
      :icon="Plus"
      @click="data.dialogVisible = true"
      style="margin-bottom: 10px"
      >新增</el-button
    >
    <el-table ref="multipleTableRef" :data="data.tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="宿舍编号" align="center" />
      <el-table-column property="roomName" label="宿舍名称" align="center" />
      <el-table-column property="rg.groupName" label="宿舍楼名称" align="center" />
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <el-button link type="danger" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <el-dialog v-model="data.dialogVisible" title="新增宿舍" width="500">
    <el-form ref="formRef" :model="data.form">
      <el-form-item label="宿舍名称" prop="roomName">
        <el-input v-model="data.form.roomName" placeholder="请输入宿舍名称"></el-input>
      </el-form-item>
      <el-form-item label="宿舍楼名称" prop="groupId">
        <el-select
          filterable
          v-model="data.form.groupId"
          placeholder="请选择宿舍楼名称"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in data.roomGroupList"
            :key="item.id"
            :label="item.groupName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="commit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from "../../api";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";
// 初始化变量
const searchForm = ref(null);
const formRef = ref(null);
const data = reactive({
  tableData: [],
  roomGroupList: [],
  dialogVisible: false,
  // 搜索参数
  searchParams: {
    groupId: "",
  },
  // 新增表单
  form: {
    roomName: "",
    groupId: "",
  },
});
// 获取table数据
const getData = async () => {
  const resp = await axios.get("/room", {
    params: {
      groupId: data.searchParams.groupId,
      roomName: data.searchParams.roomName,
    },
  });
  data.tableData = resp.data.data;
};
// 新增
const commit = () => {
  axios
    .post("/room", {
      roomName: data.form.roomName,
      groupId: data.form.groupId,
    })
    .then((res) => {
      ElMessage.success("宿舍新增成功");
      data.dialogVisible = false;
      formRef.value.resetFields();
      getData();
    });
};
// 获取所有的宿舍楼列表
const getRoomGroupList = async () => {
  const resp = await axios.get("/roomGroup");
  data.roomGroupList = resp.data.data;
};
// 重置查询表单
const searchRest = () => {
  searchForm.value.resetFields();
  getData();
};
// 删除宿舍
const remove = (row) => {
  ElMessageBox.confirm(`是否要删除[${row.rg.groupName}的${row.roomName}]宿舍`, "删除宿舍", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.delete(`/room/${row.id}`).then((res) => {
        ElMessage.success("删除成功");
        getData();
      });
    })
    .catch(() => {});
};

getData();
getRoomGroupList();
</script>

<style lang="less" scoped></style>
